<script setup lang="ts">
import { menuData } from '@/data/menu'
import { ref } from 'vue'

const dialogVisible = ref(false) // 控制模态框显示

const formData = ref({
  parentId: null as number | null,
  menuName: '',
  path: '',
  icon: '',
  permissionCode: '',
  orderNum: 0,
  status: 1, // 默认启用
})

// 修改handleAddMenu方法，接收parentId参数
const handleAddMenuDialog = (parentId: number | null = null) => {
  formData.value.parentId = parentId
  dialogVisible.value = true
}

const handleAddMenu = () => {
  console.log('提交表单', formData.value)
  dialogVisible.value = false
}

const menuPropsMapping = {
  value: 'id',
  label: 'menuName',
  children: 'children',
}

</script>

<template>
  <div class="w-full h-full flex flex-row overflow-hidden rounded-lg">
    <!-- 内容区 -->
    <div class="h-full w-full bg-white p-4 space-y-2">
      <!-- 操作按钮区域 -->
      <div class="mb-4">
        <el-button type="primary" @click="handleAddMenuDialog(null)">新增</el-button>
        <el-button type="danger">删除</el-button>
        <el-button>刷新</el-button>
      </div>

      <!-- 内容区域 -->
      <div class="w-full">
        <el-table :data="menuData" height="490px" row-key="id" stripe>
          <el-table-column type="selection" width="55" />

          <!-- 菜单名称 -->
          <el-table-column prop="menuName" label="菜单名称" min-width="200" />

          <!-- 菜单图标 -->
          <el-table-column prop="icon" label="图标" width="80">
            <template #default="scope">
              <svg-icon v-if="scope.row.icon" size="22px" :name="scope.row.icon" />
            </template>
          </el-table-column>

          <!-- 路由路径 -->
          <el-table-column prop="path" label="路由路径" min-width="180" />

          <!-- 权限标识 -->
          <el-table-column prop="permissionCode" label="权限标识" min-width="150" />

          <!-- 状态 -->
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" />
            </template>
          </el-table-column>

          <!-- 显示顺序 -->
          <el-table-column prop="orderNum" label="排序" width="80" />

          <!-- 创建时间 -->
          <el-table-column prop="createTime" label="创建时间" width="180" />

          <!-- 操作列 -->
          <el-table-column fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleAddMenuDialog(scope.row.id)"
                >新增子菜单
              </el-button>
              <el-button link type="primary" size="small">查看详情</el-button>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 新增菜单对话框 -->
    <el-dialog v-model="dialogVisible" title="新增菜单" width="600px">
      <el-form :model="formData" label-width="100px">
        <el-form-item label="父菜单">
          <el-tree-select
            v-model="formData.parentId"
            :data="menuData"
            :props="menuPropsMapping"
            check-strictly
            clearable
            placeholder="请选择父菜单（不选择则为一级菜单）"
          />
        </el-form-item>
        <el-form-item label="菜单名称" required>
          <el-input v-model="formData.menuName" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="路由路径">
          <el-input v-model="formData.path" placeholder="请输入路由路径" />
        </el-form-item>
        <el-form-item label="组件路径">
          <el-input v-model="formData.path" placeholder="请输入组件路径" />
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="formData.icon" placeholder="请输入图标名称" />
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="formData.permissionCode" placeholder="请输入权限标识" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="formData.orderNum" :min="0" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddMenu">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>
